import {useState , useEffect} from 'react'
import ReactDom from 'react-dom/client'

console.log(import.meta.hot);

function Child({children}) {
  const now = performance.now()
  while(performance.now() - now < 4){

  }
  useEffect(()=>{
    console.log("child mount");
    return ()=>{
      console.log("child unmount");
    }
  },[])
  return (
    <li>{children}</li>
  )
}

function App() {
  const [num,setNum] = useState(1)
  useEffect(()=>{
    console.log("app mount");
  },[])

  useEffect(()=>{
    console.log("number change create",num);
    return ()=>{
      console.log("number change destroy",num);
    }
  },[num])
  return (
    <div>
      <ul onClick={()=>setNum(num+1)}>
        {new Array(num).fill(1).map((item,index)=>{
          return <Child key={index}>{index}</Child>
        })}
      </ul>
    </div>
  )
}

ReactDom.createRoot(document.getElementById('root')!).render(
    <App />
)
